<template>
    <div class="QuestionnaireCreate">
        <div class="header">
            <el-button type="back" class="el-icon-arrow-left buttonLeft" @click="GoBack">返回</el-button>
            <el-button type="primary" class="buttonRight"  @click="GoNext">下一步，创建题目</el-button>
        </div>
        <div class="content">
            <div class="contentTitle">
                <span v-text="'创建调查问卷'"></span>
            </div>
            <div class="contentForm">
                <el-form :inline="true" :model="formParams" ref="ruleForm" :rules="rules" class="demo-form-inline" label-position="right" label-width="100px">
                    <div>
                    <el-form-item label="标题:" prop="title">
                        <el-input v-model = "formParams.title" placeholder = "请输入标题" style="width: 460px;" clearable></el-input>
                    </el-form-item>
                    </div>
                    <div>
                    <el-form-item label="采集时间:" prop="beginTime">
                        <el-form-item prop="beginTime">
                        <el-date-picker
                            type="datetime"
                            placeholder = "开始日期"
                            style = "width:210px;margin-right:12px"
                            v-model = "formParams.beginTime" 
                            :clearable = "false"
                            value-format = "yyyy-MM-dd HH:mm:ss"
                            :picker-options="startPickerOptions"
                        ></el-date-picker>
                        </el-form-item>
                        -
                        <el-form-item prop="endTime">
                        <el-date-picker
                            type="datetime"
                            placeholder = "结束日期"
                            style = "width:210px;margin-left:12px"
                            v-model = "formParams.endTime"
                            :clearable = "false"
                            value-format = "yyyy-MM-dd HH:mm:ss"
                            :picker-options="endPickerOptions"
                        ></el-date-picker>
                        </el-form-item>
                    </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="概述:" prop="content">
                            <quill-editor v-model = "formParams.content" />
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
let _that
export default {
    components: {
    },
    data() {
        return {
            rules:{
                title:[{ required: true, message: '请输入标题', trigger: 'change' }],
                content:[{ required: true, message: '请输入概述', trigger: 'change' }],
                beginTime:[{ required: true, message: '请选择采集开始时间', trigger: 'change' }],
                endTime:[{ required: true, message: '请选择采集结束时间', trigger: 'change' }]
            },
            formParams:{
                title: '',
                content: '',
                beginTime: '',
	            endTime: ''
            },
            startPickerOptions: {
                disabledDate(time) {
                return _that.formParams.endTime ? (time.getTime() > new Date(_that.formParams.endTime).getTime()) : ''
                }
            },
            endPickerOptions: {
                disabledDate(time) {
                return _that.formParams.beginTime ? (time.getTime() < new Date(_that.formParams.beginTime).getTime()) : ''
                }
            },
        }
    },
    props: {

    },
    created(){

    },
    mounted() {
        _that = this
    },
    methods: {
        // 返回
        GoBack() {
            this.$router.go(-1)
        },
        // 下一步
        GoNext() {
            this.$refs['ruleForm'].validate((valid) => {
                if(valid) {
                    let data = JSON.parse(JSON.stringify(this.formParams))
                    this.Api.getAssessmentListAddAssessment(data).then(res => {
                        if (res && res.code === '0') {
                            this.$message.success('新建调查问卷成功')
                        } else {
                            this.$message.warning(res.message)
                        } 
                    })
                } else{

                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
    .QuestionnaireCreate{
        width: 100%;
        height: 100%;
        .header{
            display: flex;
            justify-content: space-between;
            .buttonLeft{
                width: 70px;
                height: 36px;
                background: rgba(255, 255, 255, 1);
                border-radius: 4px;
                border: 1px solid rgba(221, 221, 221, 1);
                padding: 0;
                color: #333333;
                font-size: 14px;
            }
            .buttonRight{
                width: 136px;
                height: 36px;
                font-size: 14px;
                padding: 0;
            }
        }
        .content{
            background: #fff;
            margin-top:20px;
            .contentTitle{
                text-align: center;
                font-weight: 500;
                font-size: 20px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 60px;
                border-bottom: 1px solid #F0F2F5;;
            }
            .contentForm{
                padding:20px 20px 60px 20px;
                margin-bottom:20px;
            }
        }
    }
</style>